<template>
<el-card class="sidebar">
<el-menu
  :default-active="$route.path"
  class="el-menu-vertical"
  :router="true"
  active-text-color="#68bfd6"
  >
  <el-menu-item :index="item.idx" v-for="(item, idx) in menuList" :key="idx">
    <i :class="item.icon"></i>
    <span slot="title">{{ item.title }}</span>
  </el-menu-item>
</el-menu>
</el-card>
</template>

<script>
const menuList = [
        {
          idx: '/personal/plan',
          title: '我的学习计划',
          icon:'el-icon-reading'
        },
        {
          idx: '/personal/question',
          title: '我的个人题库',
          icon:'el-icon-camera'
        },
        {
          idx: '/personal/exam',
          title: '我的考试',
          icon:'el-icon-document'
        },
        {
          idx: '/personal/info',
          title: '个人信息',
          icon:'el-icon-user'
        }
      ]
export default {
  name: "sidebar",
  data() {
    return {
      menuList
    }
  },
}
</script>

<style scoped>
.sidebar {
  min-height: 600px;
  overflow: auto;
}
.el-menu {
  border-right: none;
  height: 100%;
}

.el-menu-vertical .is-active {
  border-left:3px solid #68bfd6;
}
</style>
